<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="admin/_fragments :: head(~{::title})">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:text="${operation}">真实标题</title>
    <!--导入网页图标 -->
    <link rel="icon" href="../../static/favicon.ico" th:href="@{/favicon.ico}" type="image/x-icon">
    <!--导入网页图标 -->
    <link rel="shortcut icon" href="../../static/favicon.ico" th:href="@{/favicon.ico}" type="image/x-icon">
    <!--导入layUI css库 -->
    <link rel="stylesheet" href="../../static/lib/layui/css/layui.css" th:href="@{/lib/layui/css/layui.css}"
          media="all">
    <!--导入公共的css，其中可定义整个网页的配色方案 -->
    <link rel="stylesheet" href="../../static/css/common.css" th:href="@{/css/common.css}">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <!-- 页面的header -->
    <div th:replace="admin/_fragments :: admin-header" class="layui-header">
        <a href="javascript:void(0)">
            <div id="l-logo" class="layui-logo">学生住宿管理系统</div>
        </a>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item"><a class="layui-icon layui-icon-shrink-right" href="javascript:void(0)"></a>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:void(0)">
                    <img src="../../static/images/default.ico"
                         th:src="${(session.currentUser==null||session.currentUser.avatar==null||session.currentUser.avatar=='')?'/images/avatar.jpg':session.currentUser.avatar}"
                         class="layui-nav-img" alt="">
                    <span th:text="${session.currentUser==null?'未登录':(session.currentUser.username==null?'':session.currentUser.username)}">用户名</span>
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="/user">个人中心</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="/logout">安全退出</a></li>
        </ul>
    </div>
    <!-- 页面的menu/左边的导航栏 -->
    <div th:replace="admin/_fragments :: admin-menu" id="div_side_bg" class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="nav-dom">
                <li class="layui-nav-item">
                    <a class="" href="javascript:void(0)">系统管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:void(0)" th:href="@{/admin/user-list}">用户列表</a></dd>
                        <!--<dd><a href="javascript:void(0)" th:href="@{/admin/role-list}">角色与权限</a></dd>-->
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:void(0)">学生管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:void(0)" th:href="@{/admin/student-list}">学生列表</a></dd>
                        <dd><a href="javascript:void(0)" th:href="@{/admin/teaching-class-list}">教学班级</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:void(0)">宿舍管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:void(0)" th:href="@{/admin/room-list}">寝室列表</a></dd>
                        <dd><a href="javascript:void(0)" th:href="@{/admin/category-list}">寝室类型</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a class="" href="javascript:void(0)">入住管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:void(0)" th:href="@{/admin/room-request-list}" id="c_y">住宿申请<span
                                class="layui-badge" th:text="${session.noHandleCount==null?'0':session.noHandleCount}">6</span></a></dd>
                        <dd><a href="javascript:void(0)" th:href="@{/admin/allocation-list}">宿舍分配详情</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>
    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="width: 94%;height:92%; margin:auto">
            <!-- 面包屑-->
            <div style="margin-top: 10px">
                <span class="layui-breadcrumb" lay-separator=" | ">
                <a href="/admin/index">首页</a>
                <a href="/admin/room-list">寝室列表</a>
                <a><cite th:text="${operation}">用户输入</cite></a>
                </span>
            </div>
            <form class="layui-form layui-form-pane" action="#" th:object="${room}"
                  th:action="@{/admin/room/save}">
                <div class="layui-form-item" style="height: 0">
                    <div class="layui-input-block">
                        <input name="id" th:value="*{id}" type="hidden" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" th:value="*{name}" lay-verify="required"
                               lay-reqtext="寝室名称不能为空" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">类型</label>
                    <div class="layui-input-block">
                        <select name="category.id" lay-filter="categories">
                            <option th:selected="${room.category!=null?room.category.id==category.id:0}"
                                    th:each="category : ${categories}" th:value="${category.id}" th:text="${category.name}"
                                    value=""></option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">寝室地址</label>
                    <div class="layui-input-block">
                        <input type="text" name="address" th:value="*{address}" lay-verify="required"
                               lay-reqtext="寝室地址不能为空" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-upload-list">
                    <img class="layui-upload-img" src="" alt="" id="pic" style="width: 180px;height: 245px">
                    <p id="uploadAgain"></p>
                    <p id="uploadMsg"></p>
                    <input type="hidden" id="pic_v" name="picture" th:value="*{picture}">
                </div>
                <div class="layui-upload">
                    <button type="button" class="layui-btn layui-btn-normal avatar-upload-btn-1" id="uploadAvatarBtn">
                        上传照片
                    </button>
                    <button type="reset" class="layui-btn layui-btn-primary avatar-upload-btn-2">重置</button>
                    <button type="submit" class="layui-btn avatar-upload-btn-3" lay-submit="" lay-filter="save">保存
                    </button>
                </div>
            </form>
        </div>
    </div>
    <div th:replace="admin/_fragments :: admin-footer" class="layui-footer" id="sdms-footer"></div>
</div>
<!--导入footer -->
<script src="../../static/js/footer.js" th:src="@{/js/footer.js}"></script>
<!--导入jQuery库 -->
<script src="../../static/lib/jQuery/jquery-3.5.1.min.js" th:src="@{/lib/jQuery/jquery-3.5.1.min.js}"></script>
<!--导入cookie库 -->
<script src="../../static/lib/cookie/js.cookie-2.2.1.min.js" th:src="@{/lib/cookie/js.cookie-2.2.1.min.js}"></script>
<!--导入layUI js库 -->
<script src="../../static/lib/layui/layui.js" th:src="@{/lib/layui/layui.js}"></script>
<!--导入公共的js，其中实现了菜单按钮的点击事件-->
<script src="../../static/js/common.js" th:src="@{/js/common.js}"></script>
<!--导入文件上传js-->
<script src="../../static/js/upload.js" th:src="@{/js/upload.js}"></script>
<script>
    //JavaScript代码区域
    layui.use(['element', 'form', 'upload'], function () {
        var $ = layui.$;
        var upload = layui.upload;
        var avatar = $("#pic_v").val();
        if (avatar != null && avatar !== "") {
            $("#pic").attr("src", avatar)
        } else {
            $("#pic").attr("src", "/images/no.png")
        }
        //图片上传的逻辑
        var uploadInst = upload.render({
            elem: '#uploadAvatarBtn',
            url: pictureUploadURL, //改成您自己的文件上传接口
            before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#pic').attr('src', result); //图片链接(base64)
                });
            },
            done: function (res) {
                //如果上传失败
                if (res.code > 0) {
                    return layer.msg('上传失败, ' + res.msg);
                } else {
                    //上传成功
                    $("#pic_v").val(res.data[0].pictureURL);
                    $("#pic").attr("src", res.data[0].pictureURL);
                }
            },
            error: function () {
                //失败状态要实现重传
                var uploadAgain = $('#uploadAgain');
                uploadAgain.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                uploadAgain.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });
    });
</script>
</body>
</html>